<template>
  <div class="cart">
    <div class="spnav">
      <div class="nav">
        <div @click="index=1">更新段位</div>
        <div @click="index=2">计算段位</div>
      </div>
    </div>
    <div class="content">
      <div v-if="index===1">
        <tittle-one>跑跑卡丁车上分提醒</tittle-one>
        <div>(点击对应标题可以重置Cookie)</div>
        <div v-if="flagSj">
          <tittle-two color="green" @click.native="delCk(['排位日期段','当前段位分','排位目标段位分'])">赛季信息</tittle-two>
          <div>赛季日期为：<br>
            <strong>{{dateFormat(dateSj[0], fmt)}}</strong> 至 <strong>{{dateFormat(dateSj[1], fmt)}}</strong></div>
          <div>赛季目标：<strong>{{mbScore}}</strong></div>
          <div>赛季天数： <strong>{{days}}</strong>天</div>
          <hr>
          <div>当前分数:<strong>{{myScore}}</strong>，今日应当上分：</div>
          <div style="font-size: 32px; font-weight: bold;margin: 20px auto">
            {{Math.floor(needScore)}}
            <span style="font-size: 16px">
                .{{needScore.toString().split('.')[1]}}
              </span>
          </div>
          <div>剩余天数约：<strong>{{sydays}}</strong>天</div>
        </div>
        <div v-else>
          <div>先设置赛季信息</div>
          <div class="setting">
            <div style="font-weight: bold">排位日期段：</div>
            <div class="set-item">
              <div>开始日期：</div>
              <el-date-picker
                v-model="dateSj[0]"
                type="datetime"
                placeholder="选择开始日期时间">
              </el-date-picker>
            </div>
            <div class="set-item">
              <div>结束日期：</div>
              <el-date-picker
                v-model="dateSj[1]"
                type="datetime"
                placeholder="选择结束时间">
              </el-date-picker>
            </div>
            <div class="set-item">
              <div style="font-weight: bold">当前段位分：</div>
              <el-input v-model="myScore" clearable></el-input>
            </div>

            <div class="set-item">
              <div style="font-weight: bold">目标段位分：</div>
              <el-input v-model="mbScore" clearable></el-input>
            </div>
          </div>
          <el-button type="success" @click="setSj">设置</el-button>
        </div>

        <div>
          <hr>
          <div>设置每日上分数据</div>
          <div class="setting">
            <div class="set-item">
              <div>上分数：</div>
              <el-input v-model="addScore" clearable></el-input>
            </div>
          </div>
          <el-button type="success" @click="setDay(true)">设置</el-button>
          <div>或</div>
          <div class="setting">
            <div class="set-item">
              <div>当前段位分：</div>
              <el-input v-model="dayScore" clearable></el-input>
            </div>
          </div>
          <el-button type="success" @click="setDay(false)">设置</el-button>
        </div>
      </div>

      <div v-else>
        <div v-if="showTab">
          <tittle-two color="purple">参考表</tittle-two>
          <el-table
            :data="allLvl"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              width="40px"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="90px"
            >
            </el-table-column>
            <el-table-column
              prop="lvl"
              label="小段位"
              width="40px"
            >
            </el-table-column>
            <el-table-column
              prop="star"
              label="星数"
              width="40px"
            >
            </el-table-column>
            <el-table-column
              prop="score"
              label="分数"
              width="40px"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="阶段总分"
              width="70px"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="setting">
          <tittle-one>段位计算</tittle-one>
          <div style="font-weight: bold">当前段位：</div>
          <el-button size="mini" @click="showTab = !showTab">参考表</el-button>
          <div class="set-item">
            <div>段位：</div>
            <el-autocomplete
              v-model="c1.name"
              :fetch-suggestions="q1"
              @select="handleSelect"
              clearable
              style="max-width: 70%"
            ></el-autocomplete>
          </div>
          <div class="set-item">
            <div>小段：</div>
            <el-input v-model="c1.lvl" clearable></el-input>
          </div>
          <div class="set-item">
            <div>星数：</div>
            <el-input v-model="c1.star" clearable></el-input>
          </div>
          <div class="set-item">
            <div>分数：</div>
            <el-input v-model="c1.score" clearable></el-input>
          </div>
          <div class="set-item">
            <div style="color: green;font-weight: bold">结果：</div>
            <el-input v-model="s1"></el-input>
          </div>
        </div>
        <el-button type="success" @click="getScore">计算</el-button>
        <tittle-one>获取段位</tittle-one>
        <div class="setting">
          <div class="set-item">
            <div>分数：</div>
            <el-input v-model="s2"></el-input>
          </div>
          <div class="set-item">
            <div style="color: green;font-weight: bold">结果：</div>
            <textarea v-model="JSON.stringify(c2)" style="width: 79%; height: 70px" />
          </div>
        </div>
        <el-button type="success" @click="getLevelxxx">计算</el-button>
        <img src="../assets/level.jpg" style="width: 100%; margin-top: 15px" alt="">
        <div style="height: 100px"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCookie, setCookie, delCookie, goto} from  '../util/request'
  import TittleOne from "./temp/TittleOne";
  import TittleTwo from "./temp/TittleTwo";
  import { Level, getScore, getLevel } from "../data/comCart";
  import {dateFormat, getTime} from "../util/daelTime";

  export default {
    name: "cart",
    components: {
      TittleTwo,
      TittleOne
    },
    data() {
      return {
        fmt: 'YYYY-MM-DD hh点',
        index: 1,
        allLvl: Level,
        dateSj: ['', ''],
        days: 0,
        sydays:0,
        curDate: '',
        myScore: 0,
        mbScore: 0,
        needScore: 0,
        addScore: '',
        dayScore: '',
        dayPlan: {},
        flagSj: false,    // 设置赛季等基本数据

        // 段位，小段，星数
        c1: {},
        s1: 0,
        s2: '',
        c2: {},
        showTab: false,

      }
    },
    methods: {
      dateFormat,
      delCk(arr) {
        const tmp = JSON.stringify(arr)
        this.$confirm(`是否删除这些${tmp}的Cookie?`, '提示', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          for (let i = 0; i < arr.length; ++i) {
            delCookie(arr[i])
          }
          this.flsh()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      getScore() {
        this.s1 = getScore(this.c1)
      },
      getLevelxxx() {
        this.c2 = getLevel(this.s2)
        console.log(this.c2, Level,'+++');
      },
      //刷新
      flsh() {
        this.$message.success('成功, 即将刷新~')
        setTimeout(() => {
          window.location.reload()
        }, 1000)
      },
      q1(query, cb) {
        let res = []
        for(let i = 0; i < this.allLvl.length; ++i) {
          res.push({value: this.allLvl[i].name, ...this.allLvl[i]})
        }
        let results = query ? res.filter(this.flt(query)) : res;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      flt(query) {
        return (res) => {
          return (res.value.toLowerCase().indexOf(query.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.c1 = item
        this.c1.lvl = Level[this.c1.id].lvl
        this.c1.score = 0
        if(item.id === 0) {this.c1.star = 30}
        else this.c1.star = 1
        console.log(this.c1);
      },
      setSj() {
        let tmp = `${this.dateSj[0].valueOf()}+${this.dateSj[1].valueOf()}`
        setCookie('排位日期段', tmp)
        setCookie('当前段位分', this.myScore)
        setCookie('目标段位分', this.mbScore)
        this.flsh()
      },
      setDay(flag) {
        if(flag) {
          this.myScore = Number(this.myScore) + Number(this.addScore)
        }
        else this.myScore = this.dayScore
        setCookie('当前段位分', this.myScore)
        this.$message.success('设置成功~')
        this.addScore = this.dayScore = ''
        this.needScore = ((this.mbScore - this.myScore) / this.sydays).toFixed(2)
      },
      init() {
        // 赛季排位信息
        const dateSj = getCookie('排位日期段')
        const myScore = getCookie('当前段位分')
        const mbScore = getCookie('目标段位分')
        if(dateSj && myScore && mbScore) {
          console.log(dateSj, myScore, mbScore);
          this.flagSj = true
          const tmp = dateSj.split('+')
          this.dateSj = [Number(tmp[0]), Number(tmp[1])]
          this.myScore = Number(myScore)
          this.mbScore = Number(mbScore)
          this.days = getTime(new Date((this.dateSj[1] - this.dateSj[0])), 'DD')
          this.sydays = getTime(new Date(this.dateSj[1] - new Date().valueOf()), 'DD')
          this.needScore = ((this.mbScore - this.myScore) / this.sydays).toFixed(2)
        }
      }
    },
    created() {
      this.dateSj = [new Date('2021-08-25 09:00:00'), new Date('2021-10-22 23:59:59')]
      const  id = this.$route.query.id
      if(!id) {
        window.location.href += '?id=1'
        window.location.reload()
      }
      else {
        if(Number(id) === 1) {
          this.index = 1
        }
        else this.index = 2
      }
      this.init()
    }
  }
</script>

<style lang="less" scoped>
  .cart {
    padding: 1rem;
    height: calc(100% - 2rem);
    display: flex;
    justify-content: center;
    .spnav {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.7);
      .nav {
        display: flex;
        justify-content: space-between;
        div {
          width: 100%;
          cursor: pointer;
        }
      }
    }
    .content {
      height: calc(100% - 2rem) !important;
      padding-top: 2rem;
      padding-left: 8px;
      max-width: 1000px;
      .setting {
        padding: 0 5px;
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        .set-item {
          padding: 5px 10px;
          display: flex;
          align-items: center;
          width: 100%;
          .el-input {
            max-width: 65%;
          }
        }
      }
    }
  }
</style>

<style lang="less">
.el-message-box__wrapper {
  top: 30%;
  .el-message-box {
    width: 100%;
  }
}
</style>
